<template>
  <div>
    <div style="padding-left: 30px;padding-right: 30px" >
      <el-form :inline="true" :model="stationDto"  class="demo-form-inline">

        <el-row :gutter="20">
          <el-col :span="8">
            <!--输入框-->
            <el-form-item label="岗位名称：">
              <el-input v-model="stationDto.name"  placeholder="操作人"></el-input>
            </el-form-item>
          </el-col>
          <!--       当前地区 -->
          <el-col :span="10">
            <el-form-item label="组织：">
              <TreeSelect style="width: 500px"
                :options="from2"
                v-model="stationDto.orgId"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!--        date-->
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>

<!--    添加修改-->
    <div>
      <el-dialog :title="addpud==true?'添加岗位':'修改岗位'" :visible.sync="outerVisible" class="custom-dialog">
        <el-form ref="form" :model="station" label-width="80px">

          <el-form-item label="岗位名称:">
            <el-input v-model="station.name"></el-input>
          </el-form-item>
          <el-form-item label="组织" prop="org_id">
              <TreeSelect
                          :options="from2"
                          v-model="station.org_id"
                          :normalizer="normalizer"
                          :show-count="true"
                          placeholder="选择上级菜单"
              />
          </el-form-item>
          <el-form-item label="状态：">
            <el-radio-group v-model="station.status">
              <el-radio label='1' value='1'>启用</el-radio>
              <el-radio label='0' value='0'>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input v-model="station.describe" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add2" v-if="addpud">新增</el-button>
            <el-button type="warning" @click="upd2" v-if="addpud==false">修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <!--      表格显示-->
      <el-table :data="Data" border style="width: 100%" ref="multipleTable"  @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="岗位名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="orgname"
          label="组织"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          sortable
          width="180"
          column-key="date"
          :filters="[{text: '正常', value:1}, {text: '异常', value:0}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status" style="color: #00afff">正常</span>
            <span v-else style="color: red">异常</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="describe"
          label="描述"
        ></el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">

            <el-button slot="reference" size="mini"
                       type="text"
                       @click="del(scope.row.id)"
            >删除</el-button>
            <el-button slot="reference" size="mini"
                       type="text"
                       @click="upd(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="stationDto.pageSize"
        @current-change="curren"
        :current-page="stationDto.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size=this.stationDto.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import { pageStation, delStation, addStation, updStation, selectOrg } from '@/api/pd-auth/station'
import user from '@/store/modules/user'
import icons from '@/components/IconSelect/requireIcons'
import IconSelect from '@/components/IconSelect/index.vue'

export default {
  components: { icons,IconSelect },

  data(){
    return{
      user: user.state,
      selectedItems:[],//选中的复选框
      outerVisible:false,
      addpud:true,
      options:[],
      selectedIds:[],
      value2:'',
      value1:[],
      from2:[],
      station:{
        id:'',
        name:'',
        org_id:'',
        status:'1',
        describe:'',
        create_time:'',
        create_user:'',
        update_time:'',
        update_user:'',
      },
      stationDto:{
        name:'',
        orgId:'',
        createTime:'',
        outTime:'',
        pageNum:1,
        pageSize:10,
      },
      title:'',
      Data:[],
      total:0,
    }
  },

  //创建生命周期树
  created() {
    this.page()
  },

  methods:{
    //选中的值
    handleSelectionChange(selection) {
      this.selectedItems = selection.id;
    },

    //状态
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },

    //添加岗位
    add2(){
      this.station.create_user=this.user.id
      this.station.update_user=this.user.id
      addStation(this.station).then(as=>{
        this.$message({
          type: 'success',
          message: '新增岗位成功!'
        })
      })
      this.station={}
      this.station.status='1'
      this.outerVisible=false
      this.page()
    },
    //修改岗位
    upd2(){
      this.station.update_user=this.user.id
      updStation(this.station).then(as=>{
        this.$message({
          type: 'success',
          message: '修改岗位成功!'
        })
      })
      this.station={}
      this.station.status='1'
      this.outerVisible=false
      this.page()
    },


    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children !=undefined) {
        return {
          id: node.data.id,
          label: node.data.name,
          children: node.children
        }
      }

    },



    /** 新增按钮操作 */
    handleAdd() {
      this.addpud=true
      this.outerVisible=true
    },


      handleChange(value) {
        console.log('Selected IDs:', value);
      }
    ,

    upd(val){
        this.addpud=false
        this.outerVisible=true
        this.station=val
      this.station.status=val.status+''
    },

    page(){
      if (this.value1===null) {
        this.stationDto.createTime = ''
        this.stationDto.outTime = ''
      }else {
        if (this.value1.length > 0) {
          this.stationDto.createTime = this.value1[0]
          this.stationDto.outTime = this.value1[1]
        }
      }

      pageStation(this.stationDto).then(res => {
        this.Data=res.data.list
        this.total=res.data.total
      })
      selectOrg().then(res => {
        this.from2=res
      });
    },

    //删除
    del(val){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStation(val)
        this.page()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    size(val) {
      this.stationDto.pageSize = val
      this.page()
    },

    curren(val) {
      this.stationDto.pageNum=val
      this.page()
    },

  }

}
</script>
